<div class="alert alert-warning" role="alert">
  Warning !<br><br>
  <strong>All examples are reponsive with this code !</strong><br>
  <code>&lt;div class="table-responsive"&gt;</code>
</div>

<div class="card mb-2">
  <div class="card-body">
    <h1 class="h4 card-title text-center text-primary mb-2">Simple</h1>
    <div class="table-responsive">
      <table class="table">
        <thead>
          <tr>
            <th scope="col">Id</th>
            <th scope="col">Name</th>
            <th scope="col">Date</th>
            <th scope="col">BoxOffice</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>Gladiator</td>
            <td>2000</td>
            <td>465,380,802</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>BraveHeart</td>
            <td>1995</td>
            <td>213,216,216</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Troy</td>
            <td>2004</td>
            <td>497,409,852</td>
          </tr>
          <tr>
            <th scope="row">4</th>
            <td>Kingdom of heaven</td>
            <td>2005</td>
            <td>218,122,627</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

<div class="card mb-2">
  <div class="card-body">
    <h1 class="h4 card-title text-center text-primary mb-2">Simple</h1>
    <div class="table-responsive">
      <table class="table text-primary">
        <thead>
          <tr class="table-danger">
            <th scope="col">Id</th>
            <th scope="col">Name</th>
            <th scope="col">Date</th>
            <th scope="col">BoxOffice</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td class="table-success">Gladiator</td>
            <td>2000</td>
            <td>465,380,802</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>BraveHeart</td>
            <td>1995</td>
            <td>213,216,216</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td class="table-info">Troy</td>
            <td>2004</td>
            <td>497,409,852</td>
          </tr>
          <tr>
            <th scope="row">4</th>
            <td>Kingdom of heaven</td>
            <td>2005</td>
            <td>218,122,627</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

<div class="card mb-2">
  <div class="card-body">
    <h1 class="h4 card-title text-center text-primary mb-2">Striped</h1>
    <div class="table-responsive">
      <table class="table table-striped">
        <thead>
          <tr>
            <th scope="col">Id</th>
            <th scope="col">Name</th>
            <th scope="col">Date</th>
            <th scope="col">BoxOffice</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>Gladiator</td>
            <td>2000</td>
            <td>465,380,802</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>BraveHeart</td>
            <td>1995</td>
            <td>213,216,216</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Troy</td>
            <td>2004</td>
            <td>497,409,852</td>
          </tr>
          <tr>
            <th scope="row">4</th>
            <td>Kingdom of heaven</td>
            <td>2005</td>
            <td>218,122,627</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

<div class="card mb-2">
  <div class="card-body">
    <h1 class="h4 card-title text-center text-primary mb-2">Hover</h1>
    <div class="table-responsive">
      <table class="table table-hover">
        <thead>
          <tr>
            <th scope="col">Id</th>
            <th scope="col">Name</th>
            <th scope="col">Date</th>
            <th scope="col">BoxOffice</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>Gladiator</td>
            <td>2000</td>
            <td>465,380,802</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>BraveHeart</td>
            <td>1995</td>
            <td>213,216,216</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Troy</td>
            <td>2004</td>
            <td>497,409,852</td>
          </tr>
          <tr>
            <th scope="row">4</th>
            <td>Kingdom of heaven</td>
            <td>2005</td>
            <td>218,122,627</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

<div class="card mb-2">
  <div class="card-body">
    <h1 class="h4 card-title text-center text-primary mb-2">Bordered</h1>
    <div class="table-responsive">
      <table class="table table-hover table-bordered">
        <thead>
          <tr>
            <th scope="col">Id</th>
            <th scope="col">Name</th>
            <th scope="col">Date</th>
            <th scope="col">BoxOffice</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>Gladiator</td>
            <td>2000</td>
            <td>465,380,802</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>BraveHeart</td>
            <td>1995</td>
            <td>213,216,216</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Troy</td>
            <td>2004</td>
            <td>497,409,852</td>
          </tr>
          <tr>
            <th scope="row">4</th>
            <td>Kingdom of heaven</td>
            <td>2005</td>
            <td>218,122,627</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

<div class="card mb-2">
  <div class="card-body">
    <h1 class="h4 card-title text-center text-primary mb-2">Small</h1>
    <div class="table-responsive">
      <table class="table table-hover table-bordered table-sm">
        <thead>
          <tr>
            <th scope="col">Id</th>
            <th scope="col">Name</th>
            <th scope="col">Date</th>
            <th scope="col">BoxOffice</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>Gladiator</td>
            <td>2000</td>
            <td>465,380,802</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>BraveHeart</td>
            <td>1995</td>
            <td>213,216,216</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Troy</td>
            <td>2004</td>
            <td>497,409,852</td>
          </tr>
          <tr>
            <th scope="row">4</th>
            <td>Kingdom of heaven</td>
            <td>2005</td>
            <td>218,122,627</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>          